在 SCSS 中，混入（mixins） 是一種能夠提高代碼重用性的功能。它允許我們定義可重用的樣式組合，並在需要時靈活地應用到不同的選擇器上。這樣的設計讓我們可以避免樣式重複，並且讓代碼更具模組化，易於維護和擴展。

一、為什麼需要混入？

1.減少重複代碼：

在大型專案中，我們經常會遇到多個選擇器需要相同的樣式，比如不同的按鈕、版面中的欄位，或是在多個頁面中重複出現的元件。如果每次都手動撰寫這些重複的樣式，會增加樣式表的大小，並且讓代碼難以維護。混入允許我們定義一組樣式，然後在多個地方使用它，極大地減少了重複代碼。

2.參數化的樣式組合：

混入的一個強大特性是它可以接收參數。這意味著我們可以根據不同的需求動態地應用樣式。例如，你可以定義一個混入來處理按鈕的外觀，而每個按鈕的顏色、大小、邊框等細節可以通過傳遞參數來靈活控制。

3.增強可維護性：

當樣式表越來越大時，維護每個重複的樣式會變得困難。如果某個樣式需要修改，而這個樣式又被多處使用，手動更新每個地方可能會很麻煩。混入允許我們在一處修改，應用到所有使用該混入的地方，從而提高了樣式表的可維護性。

二、混入的範例

// 定義一個混入，用來處理按鈕的樣式
@mixin button-styles($bg-color, $text-color, $padding: 10px) {
  background-color: $bg-color;
  color: $text-color;
  padding: $padding;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  
  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

// 使用混入應用於不同的按鈕
.button-primary {
  @include button-styles(#3498db, white);
}

.button-secondary {
  @include button-styles(#2ecc71, white);
}

.button-large {
  @include button-styles(#e74c3c, white, 20px);
}

大型按鈕超可愛的拉~~

解釋

1.定義混入：

@mixin button-styles 是一個接收三個參數的混入函式。它接受背景顏色、文字顏色和內邊距作為參數，並應用這些樣式到按鈕上。此混入還包含一個 &:hover 狀態，使按鈕在懸停時顏色變深。

2.重用樣式：

在 button-primary 和 button-secondary 中，我們使用了這個混入，傳遞不同的背景顏色和文字顏色。而在 button-large 中，我們還傳遞了一個不同的內邊距，讓按鈕看起來更大。

順帶一提，使用CSS編譯的話會看起來很複雜

每個元素都要被重複提及，複製貼上容易造成混亂。(這段CSS程式碼是我請Chat GPT跑的，謝謝他)

.button-primary {
  background-color: #3498db;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.button-primary:hover {
  background-color: #2980b9;
}

.button-secondary {
  background-color: #2ecc71;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.button-secondary:hover {
  background-color: #27ae60;
}

.button-large {
  background-color: #e74c3c;
  color: white;
  padding: 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.button-large:hover {
  background-color: #c0392b;
}

假期愉快各位